{extend name="layouts/main-layui-vue-index" /}
{block name="title"}{__block__}{/block}
{block name="header"}{/block}
{block name="beforeDiv"}{/block}
{block name="appDiv"}
<lay-container fluid="true" class="menu-box">
    <lay-card>
        <lay-form style="margin-top: 10px">
            <lay-row>
                <lay-col :md="5">
                    <lay-form-item label="菜单名称" label-width="80">
                        <lay-input v-model="searchQuery.name" placeholder="请输入" size="sm" :allow-clear="true" style="width: 98%"></lay-input>
                    </lay-form-item>
                </lay-col>
                <lay-col :md="5">
                    <lay-form-item label="菜单地址" label-width="80">
                        <lay-input v-model="searchQuery.address" placeholder="请输入" size="sm" :allow-clear="true" style="width: 98%"></lay-input>
                    </lay-form-item>
                </lay-col>
                <lay-col :md="5">
                    <lay-form-item label="权限标识" label-width="80">
                        <lay-input v-model="searchQuery.identifying" placeholder="请输入" size="sm" :allow-clear="true" style="width: 98%"></lay-input>
                    </lay-form-item>
                </lay-col>
                <lay-col :md="5">
                    <lay-form-item label-width="20">
                        <lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
                            查询
                        </lay-button>
                        <lay-button size="sm" @click="toReset"> 重置</lay-button>
                    </lay-form-item>
                </lay-col>
            </lay-row>
        </lay-form>
    </lay-card>
    <!-- table -->
    <div class="table-box">
        <lay-table
                :height="tableHeight" ref="tableRef6" :loading="loading" children-column-name="children" :columns="columns6"
                :data-source="dataSource6" :default-toolbar="true" :default-expand-all="defaultExpandAll6" :expand-index="1">
            <template #toolbar>
                <lay-button type="primary" size="sm" @click="getCheckData6">获取选中数据</lay-button>
                <lay-button size="sm" @click="changeVisible11('新建', null)" type="normal">
                    新建
                </lay-button>
                <lay-button size="sm" @click="expandAll6(true)">展开全部</lay-button>
                <lay-button size="sm" @click="expandAll6(false)">折叠全部</lay-button>
            </template>
            <template #name="{ row }">
                <lay-icon :class="row.icon"></lay-icon> &nbsp;&nbsp;
                {{ row.name }}
            </template>
            <template #option="{ row }">
                <lay-button @click="changeVisible11('新建', null)" size="xs" border="blue" border-style="dashed">
                    添加
                </lay-button>
                <lay-button @click="changeVisible11('修改', row)" size="xs" border="green" border-style="dashed">
                    修改
                </lay-button>
                <lay-button @click="toRemove" size="xs" border="red" border-style="dashed">
                    删除
                </lay-button>
            </template>
            <template #type="{ row }">
                <div v-show="row.type == '目录'">
                    <lay-tag color="#165DFF" variant="light">目录</lay-tag>
                </div>
                <div v-show="row.type == '菜单'">
                    <lay-tag color="#2dc570" variant="light">菜单</lay-tag>
                </div>
                <div v-show="row.type == '外链'">
                    <lay-tag color="#F5319D" variant="light">外链</lay-tag>
                </div>
            </template>
        </lay-table>
    </div>

    <lay-layer v-model="visible11" :title="title" :area="['700px', '370px']">
        <div style="padding: 20px">
            <lay-form :model="model11" ref="layFormRef11" required>
                <lay-row>
                    <lay-col md="12">
                        <lay-form-item label="菜单名称" prop="name">
                            <lay-input v-model="model11.name"></lay-input>
                        </lay-form-item>
                        <lay-form-item label="路由路径" prop="routePath">
                            <lay-input v-model="model11.routePath"></lay-input>
                        </lay-form-item>
                        <lay-form-item label="组件路径" prop="compontPath">
                            <lay-input v-model="model11.compontPath"></lay-input>
                        </lay-form-item>
                        <lay-form-item label="图标" prop="icon">
                            <lay-input v-model="model11.icon"></lay-input>
                        </lay-form-item>
                    </lay-col>
                    <lay-col md="12">
                        <lay-form-item label="排序" prop="sort">
                            <lay-input-number style="width: 100%" v-model="model11.sort" position="right"></lay-input-number>
                        </lay-form-item>
                        <lay-form-item label="是否显示" prop="isShow">
                            <lay-select v-model="model11.isShow" style="width: 100%">
                                <lay-select-option value="是" label="是"></lay-select-option>
                                <lay-select-option value="否" label="否"></lay-select-option>
                            </lay-select>
                        </lay-form-item>

                        <lay-form-item label="类型" prop="type">
                            <lay-input v-model="model11.type"></lay-input>
                        </lay-form-item>
                    </lay-col>
                </lay-row>
            </lay-form>
            <div style="width: 97%; text-align: right">
                <lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
                <lay-button size="sm" @click="toCancel">取消</lay-button>
            </div>
        </div>
    </lay-layer>
</lay-container>
{/block}
{block name="afterDiv"}

<script setup lang="ts">

    const searchQuery = ref({
        address: '',
        identifying: '',
        name: ''
    })

    function toReset() {
        searchQuery.value = {
            address: '',
            identifying: '',
            name: ''
        }
    }

    function toSearch() {
        page.current = 1
        change(page)
    }

    const change = (page) => {
        loading.value = true
        setTimeout(() => {
            //
            loading.value = false
        }, 1000)
    }
    const page = reactive({current: 1, limit: 10, total: 100})
    const loading = ref(false)
    const tableRef6 = ref()

    const columns6 = [
        {
            fixed: 'left',
            type: 'checkbox',
            title: '复选'
        },

        {
            title: '菜单名称',
            key: 'name',
            customSlot: 'name'
        },
        {
            title: '路由地址',
            key: 'routePath'
        },
        {
            title: '组件路径',
            key: 'compontPath'
        },
        {
            title: '排序',
            width: '120px',
            key: 'sort'
        },
        {
            title: '可见',
            key: 'isShow'
        },
        {
            title: '类型',
            key: 'type',
            customSlot: 'type'
        },
        {
            title: '操作',
            key: 'option',
            customSlot: 'option'
        }
    ]

    const dataSource6 = [
        {
            id: '10001',
            name: '工作空间',
            type: '目录',
            icon: 'layui-icon-home',
            age: 0,
            routePath: '/workspace',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10009',
                    name: '工作台',
                    type: '菜单',
                    sort: 1,
                    icon: 'layui-icon-util',
                    routePath: '/workspace/workbench',
                    compontPath: '/workspace/workbench',
                    isShow: '是'
                },
                {
                    id: '10012',
                    name: '控制台',
                    type: '菜单',
                    sort: 2,
                    icon: 'layui-icon-engine',
                    routePath: '/workspace/console',
                    compontPath: '/workspace/console',
                    isShow: '是'
                },
                {
                    id: '10012',
                    name: '分析页',
                    type: '菜单',
                    sort: 3,
                    icon: 'layui-icon-chart-screen',
                    routePath: '/workspace/analysis',
                    compontPath: '/workspace/analysis',
                    isShow: '是'
                },
                {
                    id: '10012',
                    name: '监控页',
                    type: '菜单',
                    sort: 4,
                    icon: 'layui-icon-find-fill',
                    routePath: '/workspace/monitor',
                    compontPath: '/workspace/monitor',
                    isShow: '是'
                }
            ]
        },
        {
            id: '10002',
            name: '表单页面',
            type: '目录',
            sort: 1,
            icon: 'layui-icon-table',
            routePath: '/form',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10015',
                    name: '基础表单',
                    type: '菜单',
                    sort: 1,
                    icon: 'layui-icon-form',
                    routePath: '/form/base',
                    compontPath: '/form/base',
                    isShow: '是'
                },
                {
                    id: '10016',
                    name: '复杂表单',
                    type: '菜单',
                    sort: 2,
                    icon: 'layui-icon-form',
                    routePath: '/form/intricate',
                    compontPath: '/form/intricate',
                    isShow: '是'
                }
            ]
        },
        {
            id: '10003',
            name: '列表页面',
            type: '目录',
            sort: 3,
            icon: 'layui-icon-align-left',
            routePath: '/table',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10017',
                    name: '查询列表',
                    type: '菜单',
                    sort: 1,
                    icon: 'layui-icon-search',
                    routePath: '/table/base',
                    compontPath: '/table/base',
                    isShow: '是'
                },
                {
                    id: '10018',
                    name: '卡片列表',
                    type: '菜单',
                    sort: 2,
                    icon: 'layui-icon-file-b',
                    routePath: '/table/card',
                    compontPath: '/table/card',
                    isShow: '是'
                }
            ]
        },
        {
            id: '10004',
            name: '结果页面',
            type: '目录',
            sort: 4,
            icon: 'layui-icon-template',
            routePath: '/result',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10019',
                    name: '成功页面',
                    type: '菜单',
                    sort: 1,
                    icon: 'layui-icon-success',
                    routePath: '/result/success',
                    compontPath: '/result/success',
                    isShow: '是'
                },
                {
                    id: '10020',
                    name: '失败页面',
                    type: '菜单',
                    sort: 2,
                    icon: 'layui-icon-error',
                    routePath: '/result/failure',
                    compontPath: '/result/failure',
                    isShow: '是'
                }
            ]
        },
        {
            id: '10005',
            icon: 'layui-icon-unlink',
            name: '异常页面',
            type: '目录',
            sort: 5,
            routePath: '/error',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10021',
                    name: '403',
                    type: '菜单',
                    sort: 1,
                    icon: 'layui-icon-not-found',
                    routePath: '/error/403',
                    compontPath: '/error/403',
                    isShow: '是'
                },
                {
                    id: '10022',
                    name: '404',
                    type: '菜单',
                    sort: 2,
                    icon: 'layui-icon-not-found',
                    routePath: '/error/404',
                    compontPath: '/error/404',
                    isShow: '是'
                },
                {
                    id: '10022',
                    name: '500',
                    type: '菜单',
                    sort: 3,
                    icon: 'layui-icon-not-found',
                    routePath: '/error/500',
                    compontPath: '/error/500',
                    isShow: '是'
                }
            ]
        },
        {
            id: '10006',
            name: '菜单嵌套',
            type: '目录',
            sort: 6,
            icon: 'layui-icon-app',
            routePath: '/menu',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10023',
                    name: '二级菜单',
                    type: '菜单',
                    sort: 1,
                    icon: 'layui-icon-component',
                    routePath: '/menu/menu1',
                    compontPath: '/menu/menu1',
                    isShow: '是',
                    children: [
                        {
                            id: '10023',
                            name: '三级菜单1',
                            type: '菜单',
                            sort: 1,
                            icon: 'layui-icon-template-one',
                            routePath: '/menu/menu1/menu1',
                            compontPath: '/menu/menu1/menu1',
                            isShow: '是'
                        },
                        {
                            id: '10023',
                            name: '三级菜单2',
                            type: '菜单',
                            sort: 2,
                            icon: 'layui-icon-template-one',
                            routePath: '/menu/menu1/menu2',
                            compontPath: '/menu/menu1/menu2',
                            isShow: '是'
                        }
                    ]
                },
                {
                    id: '10024',
                    name: '二级菜单',
                    type: '菜单',
                    sort: 2,
                    icon: 'layui-icon-component',
                    routePath: '/menu/menu2',
                    compontPath: '/menu/menu2',
                    isShow: '是',
                    children: [
                        {
                            id: '10023',
                            name: '三级菜单1',
                            type: '菜单',
                            sort: 1,
                            icon: 'layui-icon-template-one',
                            routePath: '/menu/menu2/menu1',
                            compontPath: '/menu/menu2/menu1',
                            isShow: '是'
                        },
                        {
                            id: '10023',
                            name: '三级菜单2',
                            type: '菜单',
                            sort: 2,
                            icon: 'layui-icon-template-one',
                            routePath: '/menu/menu2/menu2',
                            compontPath: '/menu/menu2/menu2',
                            isShow: '是'
                        }
                    ]
                }
            ]
        },
        {
            id: '10007',
            name: '内置指令',
            type: '目录',
            sort: 7,
            icon: 'layui-icon-test',
            routePath: '/directive',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10025',
                    name: '权限指令',
                    type: '菜单',
                    sort: 1,
                    icon: 'layui-icon-template',
                    routePath: '/directive/permission',
                    compontPath: '/directive/permission',
                    isShow: '是'
                }
            ]
        },
        {
            id: '10008',
            name: '外链页面',
            type: '外链',
            sort: 8,
            icon: 'layui-icon-link',
            routePath: '/page',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10027',
                    name: '弹层外链',
                    type: '外链',
                    icon: 'layui-icon-home',
                    sort: 1,
                    routePath: 'layui-icon-layer',
                    compontPath: 'layui-icon-layer',
                    isShow: '是'
                },
                {
                    id: '10028',
                    name: '原生跳转',
                    type: '外链',
                    sort: 2,
                    icon: 'layui-icon-layouts',
                    routePath: 'http://www.baidu.com',
                    compontPath: 'http://www.baidu.com',
                    isShow: '是'
                }
            ]
        },
        {
            id: '10008',
            name: '个人中心',
            type: '目录',
            sort: 9,
            icon: 'layui-icon-slider',
            routePath: '/enrollee',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10027',
                    name: '我的资料',
                    type: '菜单',
                    icon: 'layui-icon-home',
                    sort: 1,
                    routePath: '/enrollee/profile',
                    compontPath: '/enrollee/profile',
                    isShow: '是'
                },
                {
                    id: '10028',
                    name: '我的消息',
                    type: '菜单',
                    sort: 2,
                    icon: 'layui-icon-email',
                    routePath: '/enrollee/message',
                    compontPath: '/enrollee/message',
                    isShow: '是'
                }
            ]
        },
        {
            id: '10008',
            name: '系统管理',
            type: '目录',
            sort: 10,
            icon: 'layui-icon-set',
            routePath: '/system',
            compontPath: '',
            isShow: '是',
            children: [
                {
                    id: '10027',
                    name: '用户管理',
                    type: '菜单',
                    icon: 'layui-icon-home',
                    sort: 1,
                    routePath: '/system/user',
                    compontPath: '/system/user',
                    isShow: '是'
                },
                {
                    id: '10028',
                    name: '角色管理',
                    type: '菜单',
                    sort: 2,
                    icon: 'layui-icon-group',
                    routePath: '/system/role',
                    compontPath: '/system/role',
                    isShow: '是'
                },
                {
                    id: '10028',
                    name: '机构管理',
                    type: '菜单',
                    sort: 3,
                    icon: 'layui-icon-transfer',
                    routePath: '/system/organization',
                    compontPath: '/system/organization',
                    isShow: '是'
                }
            ]
        }
    ]

    const getCheckData6 = function () {
        layer.msg(tableRef6.value.getCheckData())
    }

    const defaultExpandAll6 = ref(false)

    const expandAll6 = function (flag) {
        defaultExpandAll6.value = flag
    }
    const model11 = ref({
        name: '',
        type: '',
        sort: 0,
        icon: '',
        routePath: '',
        compontPath: '',
        isShow: '是'
    })
    const layFormRef11 = ref()
    const visible11 = ref(false)

    const title = ref('新增')
    const changeVisible11 = (text, row) => {
        title.value = text
        if (row != null) {
            model11.value = JSON.parse(JSON.stringify(row))
        } else {
            model11.value = {
                name: '',
                type: '',
                sort: 0,
                icon: '',
                routePath: '',
                compontPath: '',
                isShow: '是'
            }
        }
        visible11.value = !visible11.value
    }
    const submit11 = function () {
        layFormRef11.value.validate((isValidate, model, errors) => {
            layer.open({
                type: 1,
                title: '表单提交结果',
                content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
                    model
                )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
                shade: false,
                isHtmlFragment: true,
                btn: [
                    {
                        text: '确认',
                        callback(index) {
                            layer.close(index)
                        }
                    }
                ],
                area: '500px'
            })
        })
    }
    // 清除校验
    const clearValidate11 = function () {
        layFormRef11.value.clearValidate()
    }
    // 重置表单
    const reset11 = function () {
        layFormRef11.value.reset()
    }

    function toRemove() {
        layer.confirm('您将删除所有选中的数据？', {
            title: '提示',
            btn: [
                {
                    text: '确定',
                    callback: (id) => {
                        layer.msg('您已成功删除')
                        layer.close(id)
                    }
                },
                {
                    text: '取消',
                    callback: (id) => {
                        layer.msg('您已取消操作')
                        layer.close(id)
                    }
                }
            ]
        })
    }

    function toSubmit() {
        layer.msg('保存成功！', {icon: 1, time: 1000})
        visible11.value = false
    }

    function toCancel() {
        visible11.value = false
    }
</script>
<script>
    const tableHeight=(pageHeight-153)+'px';
    vue_data = {};
    vue_setup = {
        tableHeight,toCancel,toSubmit,toRemove,reset11,clearValidate11,submit11,changeVisible11,title,visible11,layFormRef11,
        model11,expandAll6,defaultExpandAll6,getCheckData6,dataSource6,columns6,tableRef6,loading,page,change,toSearch,toReset,searchQuery
    };
    methods = {
        onLoad() {
            console.log('页面初始化请求数据并加载')
        },
    };
    watch = {};
    computed = {};
    mounted = function () {
        this.onLoad();
    };
    updated = function () {
    };
</script>
<style scoped>
    .menu-box {
        padding:  10px 15px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .top-search {
        margin-top: 10px;
        padding: 10px;
        height: 40px;
        border-radius: 4px;
        background-color: #fff;
    }

    .table-box {
        margin-top: 10px;
        padding: 10px;
        width: 100%;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #fff;
    }

    .search-input {
        display: inline-block;
        width: 98%;
        margin-right: 10px;
    }

    .table-style {
        margin-top: 10px;
    }

    .isChecked {
        display: inline-block;
        background-color: #e8f1ff;
        color: red;
    }
</style>
{/block}
{block name="constApp"}{__block__}{/block}
{block name="plugins"}{/block}
{block name="mountApp"}{__block__}{/block}